import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { resolve } from 'path';
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';

  return {
    plugins: [vue(), vueJsx()],

    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      },
    },

    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },

    server: {
      port: 3006,
      host: '0.0.0.0',
      cors: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
    },

    build: {
      target: 'es2015',
      outDir: 'dist',
      assetsDir: 'assets',
      sourcemap: !isProduction,
      minify: isProduction ? 'terser' : false,

      rollupOptions: {
        input: {
          main: resolve(__dirname, 'index.html'),
        },
        output: {
          // 微前端打包配置
          format: 'umd',
          name: 'monitorApp',
          entryFileNames: 'monitorApp.umd.cjs',
          chunkFileNames: 'monitorApp.[hash].cjs',
          assetFileNames: 'monitorApp.[ext]',

          // 外部化依赖
          external: ['vue', 'vue-router', 'pinia'],
          globals: {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            pinia: 'Pinia',
          },
        },
      },

      // 微前端配置
      lib: {
        entry: resolve(__dirname, 'src/main.ts'),
        name: 'monitorApp',
        fileName: 'monitorApp',
        formats: ['umd'],
      },
    },

    define: {
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
    },
  };
});
